<template>
    <div class="Bread">
            <el-breadcrumb separator="/">
                    <el-breadcrumb-item>靶场管理</el-breadcrumb-item>
                    <el-breadcrumb-item>新增靶场</el-breadcrumb-item>
            </el-breadcrumb>
    </div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demoRuleForm" :size="formSize"
            status-icon>
            <el-form-item label="靶场名称" prop="name" placeholder="靶场名称">
                    <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="靶场简介" prop="synopsis">
                    <el-input v-model="ruleForm.synopsis" type="textarea" />
            </el-form-item>
            <el-form-item label="难度" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择难度">
                            <el-option label="简单" value="easy" />
                            <el-option label="中等" value="medium" />
                            <el-option label="困难" value="hard" />
                            <el-option label="地狱" value="hell" />
                    </el-select>
            </el-form-item>
            <el-form-item label="所属分类" prop="classify">
                    <el-select v-model="ruleForm.classify" placeholder="请选择分类">
                            <el-option label="前端" value="web" />
                            <el-option label="后端" value="java" />
                            <el-option label="UI" value="ui" />
                    </el-select>
            </el-form-item>
            <el-form-item label="文件类型" prop="types">
                    <el-select v-model="ruleForm.types" placeholder="请选择文件类型">
                            <el-option label="JS" value="js" />
                            <el-option label="JSON" value="json" />
                            <el-option label="PNG" value="png" />
                    </el-select>
            </el-form-item>
            <el-form-item label="实验过程" prop="process" class="process" placeholder="实验过程">
                    <el-input v-model="ruleForm.process" />
                    <el-button class="addBtn">添加</el-button>
            </el-form-item>
            <el-form-item label="靶场文件地址" prop="rangeAddress">
                    <el-upload ref="upload" class="upload-demo"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
                            :on-exceed="handleExceed" :auto-upload="false">
                            <template #trigger>
                                    <el-button type="primary">点击上传</el-button>
                            </template>
                    </el-upload>
            </el-form-item>
            <el-form-item label="flag" prop="flag" placeholder="flagflag">
                    <el-input v-model="ruleForm.flag" />
            </el-form-item>
            <el-form-item label="相关资料" prop="detail">
                    <el-upload ref="upload" class="upload-demo"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
                            :on-exceed="handleExceed" :auto-upload="false">
                            <template #trigger>
                                    <el-button type="primary">点击上传</el-button>
                            </template>
                    </el-upload>
            </el-form-item>
            <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                            新增
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
    </el-form>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
//上传头像
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
upload.value!.handleStart(file)
}

const submitUpload = () => {
upload.value!.submit()
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    synopsis: '',
    region: '',
    classify: '',
    types: '',
    process: '',
    flag:'',
    // detail:''
})

const rules = reactive<FormRules>({
    name: [
            { required: true, message: '请输入靶场名称', trigger: 'blur' },
    ],
    synopsis: [
            { required: true, message: '请输入靶场简介', trigger: 'blur' },
    ],
    region: [
            {
                    required: true,
                    message: '请选择难度',
                    trigger: 'change',
            },
    ],
    classify: [
            {
                    required: true,
                    message: '请选择分类',
                    trigger: 'change',
            },
    ],
    types: [
            {
                    required: true,
                    message: '请选择文件类型',
                    trigger: 'change',
            },
    ],
    process: [
            {
                    required: true,
                    message: '请输入实验过程',
                    trigger: 'blur',
            },
    ],
    flag:[
            { 
                    required: true, message: '请输入flag', trigger: 'blur' 
            },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
            if (valid) {
                    console.log('ruleForm', ruleForm)
            } else {
                    console.log('error submit!', fields)
            }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style>
.Bread {
    width: 100%;
    height: 5%;
    background-color: #F5F5F5;
    box-sizing: border-box;
}

.demoRuleForm {
    width: 40%;
    margin-left: 2%;
    margin-top: 2%;
}

.el-form-item__content {
    flex-wrap: nowrap;
}

.addBtn {
    width: 20%;
    margin-left: -20.5%;
    border-top: none;
    border-bottom: none;
    border-right: none;
    z-index: 1;
    height: 95%;
}
</style>